<template>
  <view class="courseEvaluateDetail">
    <fl-navBar
      dark
      :border="false"
      title="听课评价"
      left-icon="left"
      color="#333333"
      :fixed="true"
      background-color="#fff"
      status-bar
    />
    <view class="coursecontent">
      <uni-collapse v-model="openInfo" ref="collapse">
        <uni-collapse-item
          name="1"
          border
          class="collapse-item"
          title-border="none"
          :border="false"
        >
          <template v-slot:title>
            <view class="doc_msg">
              <text class="line"></text>
              <text class="doc_title">基础信息</text>
            </view>
          </template>
          <view class="detail_content">
            <view class="detail_item">
              <text class="item_key">任务标题</text>
              <text class="item_value"
                >任务标题标题任务标题任务标题标题任务标题任务标题标题任务标题任务标题标题任务标题</text
              >
            </view>
            <view class="detail_item">
              <text class="item_key">到期时间</text>
              <text class="item_value">2023-10-22</text>
            </view>
            <view class="detail_item">
              <text class="item_key">责任人</text>
              <text class="item_value">王五</text>
            </view>
            <view class="detail_item">
              <text class="item_key">任务描述</text>
              <text class="item_value"
                >任务标题标题任务标题任务标题标题任务标题任务标题标题任务标题任务标题标题任务标题</text
              >
            </view>
          </view>
        </uni-collapse-item>
      </uni-collapse>
      <view class="coursecontent_tabs">
        <fl-tabs
          :styleObj="{ fontSize: '28rpx' }"
          :current="current"
          @tabsChange="tabsChange"
          :list="list"
        />
        <view class="course_contentItem">
          <view class="zxqk" v-if="current == 0">
            <view class="zxqk_item">
              <view class="statusItem">
                <view class="playStstus">已完成</view>
                <image
                  class="statusImg"
                  mode="withFix"
                  src="@/static/images/app_center/psuccess.png"
                  alt=""
                />
              </view>
              <view class="statustext">督导一组</view>
            </view>
            <view class="zxqk_item">
              <view class="statusItem">
                <view class="playStstus">已完成</view>
                <image
                  class="statusImg"
                  mode="withFix"
                  src="@/static/images/app_center/psuccess.png"
                  alt=""
                />
              </view>
              <view class="statustext">督导一组</view>
            </view>
            <view class="zxqk_item">
              <view class="statusItem">
                <view class="playStstus">已完成</view>
                <image
                  class="statusImg"
                  mode="withFix"
                  src="@/static/images/app_center/psuccess.png"
                  alt=""
                />
              </view>
              <view class="statustext">督导一组</view>
            </view>
            <view class="zxqk_item">
              <view class="statusItem">
                <view class="playStstus">已完成</view>
                <image
                  class="statusImg"
                  mode="withFix"
                  src="@/static/images/app_center/psuccess.png"
                  alt=""
                />
              </view>
              <view class="statustext">督导一组</view>
            </view>
          </view>
          <view class="xq" v-if="current == 1">2</view>
          <view v-if="current == 2" class="ddzfile">
            <FileList />
          </view>
          <view v-if="current == 3" class="teachersfile">
            <FileList />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
const openInfo = ref(["1"]);
const current = ref(0);
import FileList from "@/pages/courseEvaluateDetail/fileList.vue";
const list = ref([
  {
    id: 0,
    name: "执行情况",
  },
  {
    id: 1,
    name: "详情",
  },
  {
    id: 2,
    name: "督导组附件",
  },
  {
    id: 3,
    name: "教师附件",
  },
]);
function tabsChange(index) {
  current.value = index;
}
</script>

<style lang="scss" scoped>
.courseEvaluateDetail {
  height: 100%;
  background-color: #fff;
  .course_contentItem {
    margin-top: 40rpx;
  }
  .zxqk {
    display: flex;
    height: 100%;
    .zxqk_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 25%;
      flex-wrap: wrap;
      .statustext{
        margin-top: 10rpx;
      }
      .statusItem {
        position: relative;
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        .playStstus {
          position: absolute;
          top: 50%;
          width: 100%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 24rpx;
          text-align: center;
        }
        .statusImg {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .ddzfile {
    display: flex;
    flex-wrap: wrap;
    .ddzfile_item {
      display: flex;
      justify-content: center;
      width: 50%;
      margin-bottom: 30rpx;

      img {
        width: 60rpx;
        height: 66rpx;
        margin-right: 26rpx;
      }
      .pdfNamebox {
        .pdfName {
          width: 220rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .pdfSize {
          font-size: 24rpx;
          color: #3f3f3f;
          margin-top: 6rpx;
        }
      }
    }
  }
  .collapse-item {
    background-color: #fff;
    .detail_content {
      width: 710rpx;
      margin: 0 auto;
      background-color: #fff;
      .coursecontent_tabs {
        margin-top: 20rpx;
      }

      .detail_item {
        display: flex;
        padding: 20rpx 10rpx;
        background-color: #fff;
        border-bottom: 2rpx solid #ebedf0;

        .item_key,
        .item_value {
          color: #666666;
          font-size: 28rpx;
        }
        .item_key {
          width: 180rpx;
        }
        .item_value {
          flex: 1;
          color: #333333;
        }
      }
    }
    .doc_msg {
      display: flex;
      align-items: center;
      height: 100rpx;
      font-size: 32rpx;
      font-weight: 700;
      color: #000;
      padding-left: 25rpx;

      .line {
        width: 6rpx;
        height: 30rpx;
        background-color: #2362a6;
        margin-right: 12rpx;
      }
    }
  }
}
</style>
